<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span class="hand" :class="{'textactive' : !secondshow}">简历确认</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}"> > {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <el-col class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center" style="height: 50px;
    line-height: 50px;background-color: #fff;">
        <el-col :span="23">
          <div style="float: left;width: 50%;">
            <el-col class="interviewtrack">
              <el-select v-model="companyname" placeholder="请选择客户" @change="selectname">
                <el-option v-for="(item,index) in customerNames" :key="index" :label="item" :value="item"></el-option>
              </el-select>
              <div class="resumeconfirm">
                <el-date-picker
                  style="margin-left: 10px;height: 30px;line-height: 25px;"
                  v-model="time"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  @change="selecttime"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>
              </div>
            
            </el-col>
          </div>
          <div style="margin-bottom:20px;float: right;">
            <el-row type="flex" justify="space-between" class="btn">
              <el-input
                size="small"
                placeholder="查找"
                style="width: 136px;"
                v-model.trim="inputValue"
                @keyup.enter.native="search"
              >
                <i
                  @click="search"
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  style="cursor: pointer;"
                ></i>
              </el-input>
              <div style="margin-left:5px">
                <el-button
                  class="push"
                  :class="{'active' : newcolor}"
                  size="small"
                  v-if="jiaofu" 
                  round
                  @click="sendclick"
                >发送
                </el-button>
                <el-button
                  class="back"
                  :class="{'active1' : newcolor1}"
                  size="small"
                  v-if="jiaofu" 
                  round
                  @click="downloadExcel"
                >下载
                </el-button>
              </div>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            class="resutable"
            :data="tableData"
            highlight-current-row
            :row-key="getRowKey"
            ref="multipleTable"
            @selection-change="handleSelectionChange">
            <el-table-column
              style="border:1px solid #333"
              type="selection"
              :reserve-selection="true"
              width="55">
            </el-table-column>
            <el-table-column
              label="未反馈情况"
              
              width="120">
              <template slot-scope="scope">
                <!-- prop="name" -->
                <span style="cursor: pointer; color:#757575;">{{scope.row.noFeedState}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="推送客户"
              prop="customerName"
              width="120">
            </el-table-column>
            <el-table-column
              label="需求编号"
              prop="requireNum"
              width="140">
            </el-table-column>
            <el-table-column
              prop="postName"
              label="推送职位"
            >
            </el-table-column>
            <el-table-column prop="postLevel" label="职位级别"></el-table-column>
            <el-table-column prop="area" label="所属区域"></el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="scope">
                <!-- prop="name" -->
                <span><a :href="scope.row.group+'/'+scope.row.fileAddress" class="resumeLink" target="_blank">{{scope.row.name}}</a></span>
              </template>
            </el-table-column>
            <el-table-column label="毕业时间">
              <template slot-scope="scope">
                <span>{{scope.row.graduationTime | converTime("YYYY-MM")}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="联系方式"></el-table-column>
            <el-table-column prop="status" label="离职状态"></el-table-column>
            <el-table-column prop="" label="期望薪资">
              <template slot-scope="scope">
                <span>{{scope.row.expectSalary}}k*{{scope.row.expectSalaryNum}}</span>
              </template>
            </el-table-column>
            <el-table-column label="到岗时间">
              <template slot-scope="scope">
                <span>{{scope.row.entryTime}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="pusher" label="推送人"></el-table-column>
            <el-table-column label="推送时间">
              <template slot-scope="scope">
                <span>{{scope.row.createTime | converTime("YYYY-MM-DD")}}</span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-dialog
      title="错误"
      :visible.sync="editdialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何简历</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
                  <el-button class="sure" round @click="handleClose">确 定</el-button>
                  <el-button round @click="handleClose" class="cancel">取 消</el-button>
                </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="requireNumDialogVisible"
      width="30%"
      :before-close="reclose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">抄送人和收件人邮箱不一致!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
                  <el-button class="sure" round @click="reclose">确 定</el-button>
                  <el-button round @click="reclose" class="cancel">取 消</el-button>
                </span>
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible" :before-close="cancelSend" class="back1">
      <div class="dialogBox">
        <el-row>
          <el-col style="line-height:28px;color:#0e6195;width: 60px;">收件人：</el-col>
          <el-col :span="10" style="line-height:28px;font-size:12px;">
            <!--            <span>{{mail}}</span>-->
            <span v-for="(item,index) in addressee" :key="index">{{item}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="line"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col style="line-height:28px;color:#0e6195;width: 60px;">
            抄送人：
          </el-col>
          <el-col :span="18">
            <span style="line-height:28px;font-size:12px;" v-for="(item,index) in copier" :key="index">{{item}};</span>
          </el-col>
          <!--          <el-col :span="18" style="line-height:28px;font-size:12px;"><span v-for="(item,index) in copymail"-->
          <!--                                                                            :key="index">{{item}} <span>,</span></span>-->
          <!--          </el-col>-->
        </el-row>
        <el-row>
          <el-col>
            <div class="darkline"></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2" style="line-height:28px;color:#999798">主&nbsp;&nbsp;&nbsp;&nbsp;题：</el-col>
          <el-col :span="10" style="line-height:28px;font-size:12px;font-weight:700;">{{theme}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span style="margin-right:10px;line-height:40px;font-weight: 700;cursor: pointer;" @click="download">候选人情况统计表<span
              style="font-weight: 400;color: #9da8bc;">.xlsx </span></span>
            <span style="color: red;">(如修改请重新上传!)</span>
            <el-upload
              class="upload-demo"
              ref="upload"
              type="file"
              :action="actionurl"
              :before-upload="beforeupload"
              :show-file-list="true"
              :file-list="fileList"
              :on-success="handleAvatarSuccess"
              :on-remove="handleRemove"
              :limit="2"
              accept=".xls,.xlsx"
            >
              <el-button class="upload" slot="trigger">选取文件</el-button>
              <!--                      :on-change="handleChange"-->
            </el-upload>
            <el-col style="margin-bottom: 30px;">
              <div v-if="!filetype"
                   style="color: #F56C6C;color: #F56C6C;font-size: 12px;line-height: 1;padding-top: 4px;">
                文件上传格式为.xlsx,.xls
              </div>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <div class="lightLine"></div>
          </el-col>
        </el-row>
        <el-row style="border: 1px solid #ccc;">
          <el-col :span="20" style="padding-top: 20px;font-weight: 700;">
            <p style="padding-left: 10px;">您好:</p>
            <p style="padding-left: 30px;">&nbsp;&nbsp;附件是我司近期推送的简历信息表，有一些人员信息暂未得到反馈，请您帮忙更新一下相关信息，谢谢。</p>
          </el-col>
          <el-col style="text-indent: 1.5em;margin-top: 30px;margin-left: 10px;margin-bottom: 30px;">
            <p>周颖</p>
            <p>软件研发中心 人力资源部</p>
            <p><span>公司 : </span> <span>北京神州新桥科技有限公司</span></p>
            <p><span>地址 : </span><span>北京市海淀区长春桥路11号万柳亿城大厦2号楼16层</span></p>
            <p><span>邮箱 : </span><span>sinorjyfzx@sino-bridge.com</span></p>
            <p><span>电话 : </span><span>(+86)15962999175</span></p>
          </el-col>
          <el-col>
          </el-col>
        </el-row>
      </div>
      <div slot="title" class="dialog-title">
        <el-button type="primary" @click="sendClick" style="font-size:16px;" size="small" :disabled="disabled">
          <i class="iconfont icon-plane"></i>
          <span style="margin-left:6px;"> 发送</span>
        </el-button>
        <el-button @click="cancelSend">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  import tagsView from '../../store/modules/tagsView'
  
  export default {
    name: "resumeconfirm",
    data() {
      return {
        inputValue: "",
        secondshow: false,
        newcolor: false,
        newcolor1: false,
        secondtitle: '',
        jiaofu:true,
        addShow: false,
        companyname: '',
        customerNames: [],
        time: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }],
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        tableData: [],
        multipleSelection: [],
        mulLength: 0,
        msg: "",
        currentPage: 1,
        pagesize: 15,
        totalcount: 0,
        editdialogVisible: false,
        dialogFormVisible: false,
        disabled: false,
        copymail: [],
        mail: '',
        requireNumDialogVisible: false,
        copier: "",
        addressee: '',
        theme: '',
        excelname: '',
        actionurl: null,
        fileList: [],
        file: {},
        filetype: true,
        fileUrl: '',
        originalFilename: ''
      }
    },
    created() {
      if(tagsView.state.identity == 7){
        this.jiaofu = false;
      }
      this.actionurl = this.url + '/statistics/entryInfo/upload';
      this.selExcel();
      axios.post(this.url + '/nofeedback/selCustomer').then(res => {
        this.unlogin(res.data.code);
        if (res.data.code == 200) {
          this.customerNames = res.data.data;
        }
      })
    },
    methods: {
      //上传文件的事件
      beforeupload(file) {
        this.fileList = [];
        this.file = {};
        this.file = file;
        this.fileList.push(this.file);
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1);
        this.filetype = ((testmsg == 'xlsx') || (testmsg == 'xls'))
        return (this.filetype)
      },
      handleRemove(file, fileList) {
        this.fileList = [];
        this.file = {};
      },
      handleAvatarSuccess(res, file) {
        this.fileUrl = res.data.path;
        this.originalFilename = res.data.fileName;
      },
      //选择客户的事件
      selectname() {
        this.currentPage = 1;
        this.selExcel();
        this.multipleSelection = [];
        this.$refs.multipleTable.clearSelection();
      },
      //获取表格数据
      selExcel() {
        axios.post(this.url + '/nofeedback/selExcel', {
          "pageNum": this.currentPage,
          "pageSize": this.pagesize,
          "condition": this.inputValue, //搜索框 条件
          "customer": this.companyname,  //客户姓名
          "phaseTime": this.time //下拉框 间隔时间
        }).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      //搜索功能
      search() {
        this.currentPage = 1;
        this.selExcel();
        this.multipleSelection = [];
        this.$refs.multipleTable.clearSelection();
      },
      getRowKey(row) {
        return row.id
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.selExcel();
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.selExcel();
      },
      //选择时间获取表格数据的事件
      selecttime() {
        if(this.time == null){
          this.time = []
        }
        this.currentPage = 1;
        this.selExcel();
        this.multipleSelection = [];
        this.$refs.multipleTable.clearSelection();
      },
      handleClose() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      //关闭发送邮件弹出框
      cancelSend() {
        this.addressee = '';
        this.copier = '';
        this.theme = '';
        this.disabled = false;
        this.fileList = [];
        this.file = {};
        this.filetype = true;
        this.fileUrl = '';
        this.originalFilename = '';
        this.dialogFormVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      //下载按钮的下载表格功能
      downloadExcel() {
        let ids = [];
        if (this.multipleSelection.length == 0) {
          ids = []
        } else {
          for (let i = 0, len = this.multipleSelection.length; i < len; i++) {
            ids.push(this.multipleSelection[i].id)
          }
        }
        axios.post(this.url + '/nofeedback/iflogin').then(res => {
          this.unlogin(res.data.code);
          if (res.data.code !== -1) {
            window.location.href = this.url + '/nofeedback/downExcel?id=' + ids + '&customer=' + this.companyname + '&phaseTime=' + this.time + "&condition=" + this.inputValue + "";
          }
        })
      },
      //发送邮件弹出框里的下载表格
      download() {
        let ids = [];
        if (this.multipleSelection.length == 0) {
          ids = []
        } else {
          for (let i = 0, len = this.multipleSelection.length; i < len; i++) {
            ids.push(this.multipleSelection[i].id)
          }
        }
        axios.post(this.url + '/nofeedback/iflogin').then(res => {
          this.unlogin(res.data.code);
          if (res.data.code !== -1) {
            window.location.href = this.url + '/nofeedback/sendExcelSee?id=' + ids + '&customer=' + '' + '&phaseTime=' + '' + "&condition=" + '' + "";
          }
        })
      },
      //显示发送邮件弹出框的事件
      sendclick() {
        if (this.multipleSelection.length == 0) {
          this.editdialogVisible = true;
          document.documentElement.style.overflow = 'hidden';
        } else {
          let ids = [];
          let requireNums = [];
          if (this.multipleSelection.length == 0) {
            ids = [];
            requireNums = [];
          } else {
            for (let i = 0, len = this.multipleSelection.length; i < len; i++) {
              ids.push(this.multipleSelection[i].id)
              requireNums.push(this.multipleSelection[i].requireNum)
            }
          }
          axios.post(this.url + '/nofeedback/isRight', {
            requireNums: requireNums
          }).then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              if (res.data.message == "fail") {
                this.requireNumDialogVisible = true;
                document.documentElement.style.overflow = 'hidden';
              } else if (res.data.message == "success") {
                this.dialogFormVisible = true;
                document.documentElement.style.overflow = 'hidden';
                axios.post(this.url + '/nofeedback/getMail', {
                  ids: ids
                }).then(res => {
                  this.unlogin(res.data.code);
                  if (res.data.code == 200) {
                    this.addressee = res.data.data.recList;
                    this.copier = res.data.data.cpList;
                    this.theme = res.data.data.sub;
                  }
                })
              }
            }
          })
        }
      },
      //收件人或者抄送人不一致的弹出框关闭
      reclose() {
        this.requireNumDialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      //发送邮件
      sendClick() {
        let ids = [];
        if (this.multipleSelection.length == 0) {
          ids = []
        } else {
          for (let i = 0, len = this.multipleSelection.length; i < len; i++) {
            ids.push(this.multipleSelection[i].id)
          }
        }
        ;
        if (this.filetype) {
          this.disabled = true;
          axios.post(this.url + '/nofeedback/sendMail', {
            files: [{
              fileUrl: this.fileUrl,
              originalFilename: this.originalFilename
            }],
            ids: ids
          }).then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              this.disabled = false;
              this.dialogFormVisible = false;
              document.documentElement.style.overflow = 'auto';
              this.multipleSelection = [];
              this.$refs.multipleTable.clearSelection();
              this.selExcel();
              this.fileList = [];
              this.file = {};
              this.fileUrl = '';
              this.originalFilename = '';
            }
          })
        }
      }
    },
    watch: {
      'inputValue': function (val) {
        if (val == '') {
          this.currentPage = 1;
          this.selExcel();
          this.multipleSelection = [];
          this.$refs.multipleTable.clearSelection();
        }
      },
    },
  }
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .textactive {
    color: #1099ff;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .push {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
    padding: 7px 15px !important;
  }
  
  .push:hover {
    color: #fff !important;
  }
  
  .back {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #4c71a1 0%, #4c6785 100%);
    padding: 7px 15px !important;
  }
  
  .back:hover {
    color: #fff !important;
  }
  
  .active {
    background: linear-gradient(to bottom, #ff9600 0%, #d68300 100%);
  }
  
  .active1 {
    background: linear-gradient(to bottom, #6676e0 0%, #5260c7 100%);
  }
  
  .resutable {
    background-color: #fff;
  }
  
  .pager {
    margin-top: 20px;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .resumeLink {
    cursor: pointer;
    color: #1198ff;
    text-decoration: none;
  }
  
  .line {
    height: 1px;
    background-color: #c8c8c8;
    margin-top: 3px;
    margin-bottom: 20px;
  }
  
  .darkline {
    height: 1px;
    background-color: #4288c3;
    margin-bottom: 20px;
  }
  
  .lightLine {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .resumeconfirm {
    display: inline-block;
  }

</style>
